import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import css from './recommend.module.scss'
import { formatNumber } from '@/utils'
import ResponsiveImage from '@/components/ResponsiveImage'
class ArticleRecommend extends PureComponent {
    static propTypes = {
        list: PropTypes.array
    }

    handleArticle = item => {
        this.props.history.push(`/article/${item.id}`)
    }

    render() {
        const { list } = this.props
        return (
            <div className={css["wrap"]}>
                <h4 className="head">文章推荐</h4>
                <div className="body">
                    <ul className="list">
                        {
                            list.map(item => {
                                return (
                                    <li key={item.id} onClick={() => this.handleArticle(item)}>
                                        <div className="main">
                                            <h5 className="title">{item.title}</h5>
                                            <div className="desc">
                                                <span>{item.category.name}</span>
                                                <span>{formatNumber(item.stats.view)}阅读</span>
                                            </div>                                                    
                                        </div>
                                        <div className="cover">
                                            <ResponsiveImage className="cover-img" src={item.image_urls[0]} size="@176w_132h" />
                                        </div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

export default withRouter(ArticleRecommend)